<template>
	<view>
		<ScrollPage @scrolltolower="nextPage">
			<template #content>
				<view >
					<!-- 搜索条件 -->
					<view class="w100" style="padding: 10px 15px 25px 15px">
						<up-form labelPosition="left" labelWidth="110" labelAlign="right">
							<up-form-item label="昵称：">
								<up-input border="surround" v-model="query.nickname" clearable></up-input>
							</up-form-item>
							<up-form-item label="创建时间：">
								<view class="w100 relative">
									<up-input border="surround"  v-model="query.date"></up-input>
									<view class="hw100  bg-transparency absolute" style="height: 40px; left:0; top:0;" @click="showPicker"></view>
								</view>
							</up-form-item>
						</up-form>
						<view class="w100 text-center">
							<button class="cu-btn line-gray" @click="searchClean">
								<text class="iconfont icon-delete margin-right-10"></text> 
								<text>重<text class="padding-lr-20"></text>置</text>
							</button>
							<text class="padding-lr-20"></text>
							<button class="cu-btn line-keyblue " @click="confirmSearch">
								<text class="iconfont icon-sousuo margin-right-10"></text> 
								<text>搜<text class="padding-lr-20"></text>索</text>
							</button>
						</view>
					</view>
					<!-- 内容区 -->
					<template v-if="dataList.length > 0">
						<view class="outline">
							<template v-for="(item,index) in dataList" :key="item.id">
								<view class="flex-row row" style="padding: 15px 5px;">
									<!-- 左边 -->
									<view class="flex-col">
											<MeImage @click="previewSingleImage(item.avatar)"  :src="item.avatar" width="48px" height="48px" radius="5" :lazy-load="true" ></MeImage  >
											<MeImage :src="item.nationalFlagUrl" width="48px" height="48px"  mode="aspectFit" :lazy-load="true"></MeImage  >
									</view>
									<!-- 右边 -->
									<view class="flex-col flex-sub margin-left-15 relative">
										<view class="absolute padding-10 text-gray font-s15 " style="top: 5px;right: 5px;">
                                           <text>{{ index + 1 }}</text>
										</view>
										<view>
											<text class="text-bold">昵称:</text>
											<text class="margin-left-10 font-s36 text-lightGreyblue text-bold">{{item.nickname}}</text>
										</view>
										<view v-if="item.nationality" class="margin-tb-5" >
											<text class="text-bold">国籍:</text>
											<text class="margin-left-10 ">{{item.nationality}}</text>
											<text class="margin-left-10 text-gray font-s22">({{item.countryCode}})</text>
										</view>
										<view class="margin-tb-5" >
											<text class="text-bold">用户ID:</text>
											<text class="margin-left-10">{{item.userId}}</text>
										</view>
										<view class="margin-tb-5" >
											<text class="text-bold">生日:</text>
											<text class="margin-left-10">{{item.birthday}}</text>
										</view>
										<view class="flex-col  margin-tb-5" >
											<MeImage @click="previewSingleImage(item.albumUrl)"  :src="item.albumUrl" width="148px" height="148px" radius="5" :lazy-load="true"></MeImage  >
										</view>
										<view class="margin-tb-5" >
											<text class="text-bold">文件大小:</text>
											<text class="margin-left-10">{{ (item.fileSize / 1024 / 1024).toFixed(2) }}M </text>
										</view>
										<view class="margin-tb-5" >
											<text class="text-bold">创建时间:</text>
											<text class="margin-left-10">{{ item.createTime }}</text>
										</view>
										<template v-if="item.updateTime">
											<view class="margin-tb-5" >
												<text class="text-bold">更新时间:</text>
												<text class="margin-left-10">{{ item.updateTime }}</text>
											</view>
										</template>
										<view class="margin-tb-5" >
											<text class="text-bold">状态:</text>
											<text class="margin-left-10 text-green" v-if="item.status === 0">正常显示</text>
											<text class="margin-left-10 text-orange" v-else>已被平台屏蔽</text>
										</view>
										<view class=" margin-top-32 flex-row" >
											<template v-if="item.status == False">
												<button class="cu-btn line-red" @click="switchStatus(item.id, True)">
													<text>屏蔽</text>
													<text class="iconfont icon-pingbi margin-left-10"></text> 
												</button>
											</template>
											<template v-else>
												<button class="cu-btn line-green"  @click="switchStatus(item.id, False)">
													<text>恢复</text>
													<text class="iconfont icon-xianshi margin-left-10"></text> 
												</button>
											</template>
										</view>
									</view>
								</view>
							</template>
						</view>
						<view v-if="!loadding" class="h600 flex-col align-center">
							<view class="h64"></view>
							<button class="cu-btn line-blue" :disabled="dataList.length >= query.totalSize" @click="nextPage">加载更多数据</button>
						</view>
					</template>
					<!-- 暂无数据 -->
					<template v-else>
                        <view v-if="!loadding" class="h300 w100 flex-col-center text-gray81">
							<text class="iconfont icon-zanwushuju2" style="font-size: 125px;"></text>
						</view>
					</template>
				</view>
			</template>
		</ScrollPage>
		<up-datetime-picker ref="datePicker"  :formatter="formatter"    :show="showDatetime"  @cancel="cancelPicker" v-model="dataPickerValue"  
	   					cancelColor="red" @confirm="confirmSelectDate" mode="date"></up-datetime-picker>
	</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { storeToRefs } from 'pinia'
import { showError } from '@/utils/msg-show'
import { previewSingleImage } from '@/utils/img'
import { switchStatusApi } from '@/api/anchor/album'
import { False, True } from "@/utils/keyWord"
import { formatter, convertDateFormat } from '@/utils/util'
import { useAnchorAlbumStore } from '@/store'

const anchorAlbumStore = useAnchorAlbumStore()
const { query, dataList } = storeToRefs(anchorAlbumStore)

const loadding = ref(false)

const datePicker = ref()
const showDatetime = ref(false)
const today = new Date()
const dataPickerValue = ref(today.getTime())


// 显示picker
function showPicker(){
    uni.hideTabBar({
		animation:true,
		success: ()=>{
            showDatetime.value = true
		}
	})
}

// 取消picker窗口
function cancelPicker(){
  	uni.showTabBar({
		animation:true,
		success: ()=>{
			showDatetime.value = false
		}
	})
}


// 确定选择日期
function confirmSelectDate(val: any){
	const timestamp = val.value
    const date = new Date(timestamp)
    query.value.date = convertDateFormat(date)
	// animation	是否需要动画效果，仅小程序支持
	uni.showTabBar({
		animation:true,
		success: ()=>{
              showDatetime.value = false
		}
	})
}

// 确定搜索
async function confirmSearch(){
	dataList.value = []
    query.value.pageNum = 1
	await search()
}

// 下一页
async function nextPage(){
	if(dataList.value.length < query.value.totalSize){
		query.value.pageNum = query.value.pageNum + 1
		await search()
	}
}

// 搜索
async function search(){
	query.value.totalSize = undefined
	uni.showLoading({mask: true})
	loadding.value = true	
	await anchorAlbumStore.getPage().finally(()=>{
		uni.hideLoading()
		loadding.value = false
	})
}

// 清空搜索条件
function searchClean(){
	query.value.nickname = ''
	query.value.date = ''
	confirmSearch()
}

// 切换状态
async function switchStatus(id:number, status: number){
	const index = dataList.value.findIndex(e => e.id === id)
	if(index != -1){
		uni.showLoading({mask: true})
        await switchStatusApi({id, status}).then((res:any) => {
			dataList.value[index] = { 
				...dataList.value[index], 
				status: res.data.status, 
				updateTime: res.data.updateTime
			}
		}).catch(err => {
			showError(err.msg || err.errMsg || err)
		}).finally(()=>{
			uni.hideLoading()
		})
	}
}


onLoad( async () => {
   loadding.value = true		
   uni.showLoading({mask: true})
   anchorAlbumStore.init().finally(()=>{
      uni.hideLoading()
	  loadding.value = false
   })
});
</script>